<!-- src/views/data-security/VersioningPage.vue -->

<template>
    <div class="versioning-page" v-loading="isLoading">
        <el-card shadow="never">
            <template #header>
                <div class="card-header">
                    <span>版本控制</span>
                </div>
            </template>

            <!-- 【核心修改 1】使用 v-if 来区分两种UI -->
            <div v-if="versioningStatus === 'never_enabled'">
                <div class="setting-item">
                    <div class="setting-info">
                        <span class="setting-label">版本控制状态</span>
                        <p class="setting-description">
                            您的存储桶当前尚未开启版本控制。开启后，可有效保护您的数据，防止因误操作或意外覆盖导致数据丢失。
                        </p>
                    </div>
                    <div class="setting-action">
                        <el-button type="primary" @click="enableVersioning" :loading="isSwitchLoading">
                            开启版本控制
                        </el-button>
                    </div>
                </div>
            </div>

            <div v-else>
                <div class="setting-item">
                    <div class="setting-info">
                        <span class="setting-label">版本控制状态</span>
                        <p class="setting-description">
                            开启版本控制后，针对文件的覆盖和删除操作将会以历史版本的形式保存下来，可随时恢复，防止数据误操作丢失。
                        </p>
                    </div>
                    <div class="setting-action">
                        <el-switch v-model="isSwitchOn" :loading="isSwitchLoading" :before-change="handleSwitchChange"
                            active-text="已开启" inactive-text="已暂停" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                    </div>
                </div>
            </div>

            <el-alert title="注意" type="info" show-icon :closable="false">
                <p>版本控制功能一旦开启，便无法回到“从未开启”状态，只能在“已开启”和“已暂停”之间切换。</p>
                <p>暂停版本控制后，新上传的同名文件将直接覆盖旧文件，且不会再产生新的历史版本。</p>
            </el-alert>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import apiClient from '@/api/index.js';
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps({
    bucketName: { type: String, required: true },
});

const isLoading = ref(true);
const isSwitchLoading = ref(false);

// 【核心修改 2】使用一个字符串来存储三种状态
const versioningStatus = ref('never_enabled'); // 'never_enabled', 'Enabled', 'Suspended'

// 【核心修改 3】创建一个计算属性，专门给 el-switch 使用
const isSwitchOn = computed({
    get: () => versioningStatus.value === 'Enabled',
    set: (newValue) => {
        // 当 el-switch 更新 v-model 时，这个 setter 会被调用
        // 我们在这里更新底层的三态状态
        versioningStatus.value = newValue ? 'Enabled' : 'Suspended';
    }
});

// 获取状态的函数
const fetchVersioningStatus = async () => {
    try {
        isLoading.value = true;
        const response = await apiClient.get(`/api/v1/buckets/${props.bucketName}/details`);
        const statusText = response.data.versioning; // '已开启', '已暂停', '未开启'

        // 【核心修改 4】将后端返回的中文状态映射到我们的内部状态
        if (statusText === '已开启') {
            versioningStatus.value = 'Enabled';
        } else if (statusText === '已暂停') {
            versioningStatus.value = 'Suspended';
        } else {
            versioningStatus.value = 'never_enabled';
        }

    } catch (error) {
        ElMessage.error("获取版本控制状态失败");
    } finally {
        isLoading.value = false;
    }
};

// 【核心修改 5】创建一个专门用于“首次开启”的函数
const enableVersioning = async () => {
    try {
        await ElMessageBox.confirm(
            `首次开启版本控制后，该功能将无法被彻底关闭。确定要为存储桶 "${props.bucketName}" 开启吗？`,
            '开启版本控制',
            { type: 'warning' }
        );

        isSwitchLoading.value = true;
        await apiClient.put(`/api/v1/buckets/${props.bucketName}/versioning`, { status: 'Enabled' });

        ElMessage.success('版本控制已成功开启');
        // versioningStatus.value = 'Enabled'; // 手动更新状态
        await fetchVersioningStatus();
    } catch (error) {
        if (error !== 'cancel') ElMessage.error('开启失败');
    } finally {
        isSwitchLoading.value = false;
    }
}

// 切换“开启”/“暂停”的函数
// src/views/data-security/VersioningPage.vue

// 切换“开启”/“暂停”的函数
const handleSwitchChange = () => {
    // 注意：我们不再需要 async/await，因为 before-change 本身就支持 Promise
    // 它返回一个 Promise 即可
    return new Promise((resolve, reject) => {
        // 关键：在这里的 isSwitchOn.value 仍然是【旧的】状态
        const action = isSwitchOn.value ? '暂停' : '开启';
        const newApiStatus = isSwitchOn.value ? 'Suspended' : 'Enabled';

        ElMessageBox.confirm(`确定要${action}版本控制功能吗？`, `确认${action}`, { type: 'warning' })
            .then(() => {
                // 用户点击了“确定”
                isSwitchLoading.value = true;
                apiClient.put(`/api/v1/buckets/${props.bucketName}/versioning`, { status: newApiStatus })
                    .then(() => {
                        // API 调用成功
                        ElMessage.success(`版本控制已成功${action}`);
                        // 【关键】resolve(true)，告诉 el-switch 可以更新状态了
                        resolve(true);
                    })
                    .catch((err) => {
                        // API 调用失败
                        ElMessage.error('操作失败');
                        // 【关键】reject()，告诉 el-switch 不要更新状态
                        reject(new Error('API call failed'));
                    })
                    .finally(() => {
                        isSwitchLoading.value = false;
                    });
            })
            .catch(() => {
                // 用户点击了“取消”
                // 【关键】reject()，告诉 el-switch 不要更新状态
                reject(new Error('User cancelled'));
            });
    });
};

onMounted(fetchVersioningStatus);
</script>

<style scoped>
/* 样式基本可以保持不变 */
.versioning-page {
    padding: 20px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--el-border-color-light);
}

.setting-label {
    font-size: 16px;
    font-weight: 500;
}

.setting-description {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    margin-top: 8px;
}
</style>